<template>
  <div class="carousel">
    <el-carousel height="400px" trigger="click">
      <el-carousel-item v-for="(item, index) in scrollList" :key="index">
        <img :src="item.img" class="image" />
        <div class="carousel-text-wrap">
          <span>{{ item.text }}</span>
          <time>{{ item.date }}</time>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'Carousel',
  data() {
    return {
      // 轮播图数据
      scrollList: [
        {
          img: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          text: "计算机科学与工程学院开展《厉害了我的国》观影主题教育活动",
          date: "2019-9-9",
          link: ""
        },
        {
          img: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          text: "计算机科学与工程学院开展《厉害了我的国》观影主题教育活动",
          date: "2019-9-9",
          link: ""
        },
        {
          img: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          text: "计算机科学与工程学院开展《厉害了我的国》观影主题教育活动",
          date: "2019-9-9",
          link: ""
        },
        {
          img: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          text: "计算机科学与工程学院开展《厉害了我的国》观影主题教育活动",
          date: "2019-9-9",
          link: ""
        },
        {
          img: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          text: "计算机科学与工程学院开展《厉害了我的国》观影主题教育活动",
          date: "2019-9-9",
          link: ""
        }
      ],
    }
  },
}
</script>

<style scoped>
.carousel {
  position: relative;
  width: 100%;
  background-image: url('https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg');
}

.image {
  width: 75%;
  height: 100%;
}

.scroll-wrap {
  width: 100%;
  height: 400px;
  background-color: pink;
}

/* .el-carousel .el-carousel__indicators {
  left: 1010px;
  bottom: 20px;
} */

.el-carousel__item {
  display: flex;
}

.el-carousel__item .carousel-text-wrap {
  position: relative;
  font-size: 1.25rem;
  width: 25%;
  height: 100%;
  background-color: #2c3338;
  /* left: 75%; */
  padding: 40px 40px 0 40px;
  box-sizing: border-box;
  color: rgb(224, 217, 217);
  
}

.el-carousel__item .carousel-text-wrap time {
  display: block;
  padding-top: 20px;
  font-size: 1rem;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>